<template>
  <view class="contain">
    <div class="btn-content">
      <button class="wx-login" open-type="getPhoneNumber" @getphonenumber="phoneLogin">微信一键登录</button>
<!--      <div class="phone-btn">手机号登录/注册</div>-->

      <div class="txt" @click="contractCheck = !contractCheck">
        <wd-icon name="circle1" size="22px" color="#FFFFFF" v-if="!contractCheck"></wd-icon>
        <wd-icon name="check-outline" size="22px" color="#FFFFFF" v-else></wd-icon>
        我已阅读并同意《用户协议》
      </div>
    </div>
  </view>
</template>

<script lang="ts" setup name="login">
import { onMounted, ref } from "vue";
import { useAuthStore } from '@/state/modules/user';
import { useRouter } from 'uni-mini-router';
const router = useRouter();
const authStore = useAuthStore();
const contractCheck = ref(true);
const code = ref('');
import { wxappAuth, getUserInfo } from '@/api/user'
import cookie from '@/utils/store/cookie'

function getLoginCode() {
  uni.login({
    success: async loginRes => {
      // console.log("🚀 ~ file: index.vue:171 ~ getLoginCode ~ loginRes:", loginRes)
      code.value = loginRes.code
    }
  })
}
onMounted(() => {
  getLoginCode();
})

// login登录
function phoneLogin(e) {
  if (!contractCheck.value) {
    uni.showToast({
      title: '请先阅读并同意用户协议',
      icon: 'none',
    });
    return;
  }if (e.detail.errMsg == 'getPhoneNumber:ok') {
    // console.log('wxLoginCode', code.value);
    wxappAuth({
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv,
      code: code.value,
      spread: cookie.get('spread'),
    })
      .then((res) => {
        // console.log('登录成功,开始处理登录信息保存，并获取用户详情', res);
        authStore.setToken(res.data.token)
        uni.hideLoading();
        authStore.getUserInfo();
        router.pushTab({
          path: '/pages/home/home'
        })
      })
      .catch((error) => {
        // console.log(error);
        // console.log('登录接口调用失败');
        getLoginCode();
      });
  } else {
    uni.showToast({
      title: '已拒绝授权',
      icon: 'none',
      duration: 2000,
    });
  }
}
</script>

<style lang="scss" scoped>
.contain {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #ff5f4d 0%, #f6892d 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;

  .btn-content {
    width: 100%;
    position: absolute;
    bottom: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30rpx;
    .wx-login {
      width: 608rpx;
      height: 112rpx;
      background: #222222;
      border-radius: 22rpx 22rpx 22rpx 22rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #ffffff;
      line-height: 112rpx;
      text-align: center;
    }
    .phone-btn {
      width: 608rpx;
      height: 112rpx;
      border: 2rpx solid #ffffff;
      border-radius: 22rpx 22rpx 22rpx 22rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #ffffff;
      line-height: 112rpx;
      text-align: center;
    }
    .txt {
      width: 608rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10rpx;
      .wd-icon-circle1 {
        color: #ffffff;
        background: #ffffff;
      }
      .wd-icon-check-outline {
        color: #ffffff;
      }
    }
  }
}
</style>
